// 50以内 width height margin padding
@for $i from 1 through 50 {
  [w#{$i}] { width: 1px * $i; }
  [h#{$i}] { height: 1px * $i; }
  [m#{$i}] { margin: 1px * $i; }
  [mt#{$i}] { margin-top: 1px * $i; }
  [mr#{$i}] { margin-right: 1px * $i; }
  [mb#{$i}] { margin-bottom: 1px * $i; }
  [ml#{$i}] { margin-right: 1px * $i; }
  [p#{$i}] { padding: 1px * $i; }
  [pt#{$i}] { padding-top: 1px * $i; }
  [pr#{$i}] { padding-right: 1px * $i; }
  [pb#{$i}] { padding-bottom: 1px * $i; }
  [pl#{$i}] { padding-right: 1px * $i; }
}
// 50%
[w-50] { width: 50%; }
[h-50] { height: 50%; }

[flex] {
  display: flex;
  flex-direction: column;
}
[flexr] {
  display: flex;
  flex-direction: row;
}
[flex-r] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
[flex-c] {
  display: inline-flex;
  flex-direction: column;
}
